<template>
    <div class="category_content">
        <div class="title">
            <div :class="{active: countIndex==index}" v-for="(item,index) in categoryList" :key="index" @click="indexChange(index,item)">{{ item.title }}</div>
        </div>
        <div class="content">
            <div v-for="(item,index) in cateContentList" :key="index">
                <!-- <a :href="item.link"> -->
                <img :src="item.image">
                <p>{{ item.title }}</p>
                <!-- </a> -->
            </div>
        </div>
    </div>
</template>
<script>

export default {
    props: {
        categoryList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            countIndex:0,
            maitkey:1,
			 cateContentList:[{"title":"乌苏啤酒12瓶","image": require('@/assets/img/catogery/avatar.png')},{"title":"川之味凉皮","image": require('@/assets/img/catogery/avatar.png')},{"title":"大窑550ml","image": require('@/assets/img/catogery/avatar.png')},{"title":"新土豆480g","image": require('@/assets/img/catogery/avatar.png')},{"title":"卫生纸20包","image": require('@/assets/img/catogery/avatar.png')},{"title":"格瓦斯40瓶","image": require('@/assets/img/catogery/avatar.png')},{"title":"螺丝椒200g","image": require('@/assets/img/catogery/avatar.png')},{"title":"柔纸巾300包","image": require('@/assets/img/catogery/avatar.png')}],
		    Info:[[{"title":"乌苏啤酒12瓶","image": require('@/assets/img/catogery/avatar.png')},{"title":"川之味凉皮","image": require('@/assets/img/catogery/avatar.png')},{"title":"大窑550ml","image": require('@/assets/img/catogery/avatar.png')},{"title":"新土豆480g","image": require('@/assets/img/catogery/avatar.png')},{"title":"卫生纸20包","image": require('@/assets/img/catogery/avatar.png')},{"title":"格瓦斯40瓶","image": require('@/assets/img/catogery/avatar.png')},{"title":"螺丝椒200g","image": require('@/assets/img/catogery/avatar.png')},{"title":"柔纸巾300包","image": require('@/assets/img/catogery/avatar.png')}],
			 [{"title":"大头油菜","image": require('@/assets/img/catogery/avatar.png')},{"title":"生菜","image": require('@/assets/img/catogery/avatar.png')},{"title":"鲜蘑","image": require('@/assets/img/catogery/avatar.png')},{"title":"架豆王","image": require('@/assets/img/catogery/avatar.png')},{"title":"茄子","image": require('@/assets/img/catogery/avatar.png')},{"title":"茼蒿","image": require('@/assets/img/catogery/avatar.png')},{"title":"砂糖橘","image": require('@/assets/img/catogery/avatar.png')},{"title":"宏泰酸菜","image": require('@/assets/img/catogery/avatar.png')}],
			 [{"title":"百事可乐","image": require('@/assets/img/catogery/avatar.png')},{"title":"可口可乐","image": require('@/assets/img/catogery/avatar.png')},{"title":"雪碧","image": require('@/assets/img/catogery/avatar.png')},{"title":"康师傅矿泉水","image": require('@/assets/img/catogery/avatar.png')},{"title":"红牛","image": require('@/assets/img/catogery/avatar.png')},{"title":"中国劲酒","image": require('@/assets/img/catogery/avatar.png')},{"title":"雪花勇闯天涯","image": require('@/assets/img/catogery/avatar.png')},{"title":"农夫果园","image": require('@/assets/img/catogery/avatar.png')}]
		   ],            
		}
    },
    created() {			
	    console.log(this)
	    this.cateContentList = this.Info[this.maitKey-1];   
		     
    },
    methods:{
        indexChange(index,item){
            this.countIndex = index;
            this.maitKey = item.maitKey
            //console.log(this.maitKey);          
             //正常访问后端请求数据  
            this.cateContentList = this.Info[this.maitKey-1];          
        
    }
 },
}

</script>

<style lang="less" scoped>
.category_content {
        margin-top: 67px;
        overflow: hidden; 
		position:fixed; 
		top:0; bottom:0; 
		height:80%;
		left:0; right:0;
    .title {
        background-color: #F7F7F7;
        text-align: center;
        float:left; 
        overflow:auto; 
        width:30%;
        height: 100%;
        div {
            line-height: 2.9rem;
            font-size: 0.4rem;
        }
        div:hover{
            cursor: pointer;
        }
        .active{
            background-color: #ffffff;
            border-left: 3px solid #FF8A9D;
        }
    }
    .content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        float:left;
         overflow:auto; 
         width:70%; 
         height:100%;
         div{
             img{
                 width: 6rem;
                 height: 6rem;
             }
             p{
                 font-size: 0.36rem;
             }
         }
    }
	
	
	
}
</style>